Scripting
开始
文档
更新日志
隐私
开始
文档
更新日志
隐私
简体中文

内容外边距

contentMargins 修饰符用于为视图内容添加自定义的外边距（Margins）。它支持统一设置所有边，也支持根据指定方向（如顶部、底部、水平、垂直）以及不同位置（内容区域或滚动指示器区域）灵活设置边距。

类型定义

1contentMargins?: 
2  | number
3  | EdgeInsets
4  | {
5      edges?: EdgeSet
6      insets: number | EdgeInsets
7      placement?: ContentMarginPlacement
8    }

参数说明

insets（必填）

指定要添加的边距数值：

  • 可传入一个数字，表示所有边统一使用该数值；
  • 或传入 EdgeInsets 对象，分别设置 top、bottom、leading、trailing。

示例：统一边距

1<ScrollView contentMargins={20}>
2  <Text>上下左右各添加 20 点边距</Text>
3</ScrollView>

示例：分别设置边距

1<ScrollView
2  contentMargins={{
3    top: 10,
4    bottom: 30,
5    leading: 16,
6    trailing: 16
7  }}
8>
9  <Text>自定义边距</Text>
10</ScrollView>

edges（可选）

设置要在哪些方向上应用边距，默认是全部方向。

类型

1type EdgeSet = "top" | "bottom" | "leading" | "trailing" | "vertical" | "horizontal" | "all"

示例：仅设置上下边距

1<ScrollView
2  contentMargins={{
3    edges: "vertical",
4    insets: 12
5  }}
6>
7  <Text>仅上下有边距</Text>
8</ScrollView>

placement（可选）

指定边距的作用区域，适用于滚动容器（如 ScrollView）中需要区分内容区域和滚动条指示区域的场景。

类型

1type ContentMarginPlacement = "automatic" | "scrollContent" | "scrollIndicators"

可选值说明：

值 描述
"automatic" 默认行为，系统决定边距应用位置
"scrollContent" 边距应用于可滚动的内容区域
"scrollIndicators" 边距仅应用于滚动指示器（如滚动条）区域

示例：边距仅作用于内容区域

1<ScrollView
2  contentMargins={{
3    insets: 24,
4    placement: "scrollContent"
5  }}
6>
7  <Text>内容区域设置边距，滚动条不受影响</Text>
8</ScrollView>

完整示例

1<ScrollView
2  contentMargins={{
3    edges: "horizontal",
4    insets: { leading: 20, trailing: 20, top: 0, bottom: 0 },
5    placement: "scrollContent"
6  }}
7>
8  <VStack spacing={10}>
9    <Text>仅在横向内容区域添加边距</Text>
10  </VStack>
11</ScrollView>

参数汇总

参数 说明
insets 必填。边距数值，可为统一数字或 EdgeInsets 对象
edges 可选。应用边距的方向，如 "vertical"、"horizontal" 等
placement 可选。边距作用区域（内容区域或滚动条区域）
大纲